<template>
	<!-- 日常添加明细 -->
	<view>
		<view style="height: 100%;padding-top: 20rpx;padding-bottom: 200rpx;">
			<uni-forms ref="form" :modelValue="entity" label-width="110px">
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="客户名称:" name="CustomerName">
						<view @click="CustomerChoice">
							<uni-easyinput v-model="entity.CustomerName" suffixIcon="compose" :adjust-position="false"
								:inputBorder="false" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="业务性质:" :rules="$rules.handle.ExpenseTypeName" required
						name="ExpenseTypeName">
						<!-- 暂时不删除 -->
						<!-- <uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.ExpenseType" :localdata="newExpenseTypeOptions"
							@change="selectOptionsChange($event, 'ExpenseType')" :disabled="disabled"></uni-data-select> -->
						<uni-data-picker popup-title="请选择业务性质" :localdata="dataTree" @change="pickerChange"
							v-model="entity.ExpenseTypeName">
						</uni-data-picker>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票据类型:" :rules="$rules.handle.BillType" required name="BillType">
						<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.BillType" :localdata="newBillTypeOptions"
							@change="selectOptionsChange($event, 'BillType')" :disabled="disabled"></uni-data-select>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="发票分类:" :rules="$rules.handle.InvoiceClassification" required
						name="InvoiceClassification">
						<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.InvoiceClassification" :localdata="newInvoiceClassificationOptions"
							@change="selectOptionsChange($event, 'InvoiceClassification')"
							:disabled="disabled"></uni-data-select>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票面金额:" name="FaceAmount" :rules="$rules.handle.FaceAmount" required>
						<view>
							<uni-easyinput v-model="entity.FaceAmount" :inputBorder="false" type="number"
								@input="inputChange($event, 'FaceAmount')" :adjust-position="false" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="报销金额:" name="ReimburseAmount" :rules="$rules.handle.ReimburseAmount"
						required>
						<view>
							<uni-easyinput v-model="entity.ReimburseAmount" type="number"
								@input="inputChange($event, 'ReimburseAmount')" :adjust-position="false"
								:inputBorder="false" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票据张数:" name="BillsNum">
						<view>
							<uni-easyinput v-model="entity.BillsNum" :inputBorder="false" :adjust-position="false" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="是否无票支出:" name="IsNoTicket">
						<radio-group @change="switchChange">
							<view style="display: flex;">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in IsNoTicketOptions"
									:key="item.value">
									<view class="flex Acenter" style="margin-right: 50rpx;margin-top: 10rpx;">
										<radio :value="item.value" :checked="item.checked"
											style="transform: scale(0.8);" />
										<view>{{item.name}}</view>
									</view>

								</label>
							</view>
						</radio-group>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="摘要:" name="ItemAbstract">
						<uni-easyinput v-model="entity.ItemAbstract" type="textarea" :adjust-position="false"
							:inputBorder="false" />
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;display: flex;justify-content: space-between;">
					<uni-forms-item label="附件:" name="reimburse_Files">
						<!-- <button @click="open">附件</button> -->
					</uni-forms-item>
				</view>
				<!-- 上传附件 -->
				<UploadCopy ref="UploadCopy" @handlerSuccess="handlerSuccess" @handlerRmoveFile="handlerRmoveFile">
				</UploadCopy>
			</uni-forms>
		</view>
		<view class="submitButton">
			<u-button type="primary" @click="handleSubmitDetailSave">保存</u-button>
		</view>

		<!-- 引用客户组件 -->
		<Myuser @customerChoice="Client" ref="myuser" />
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	//客户
	import Myuser from "../../components/Myuser.vue";
	import UploadCopy from "../../components/uploadCopy.vue"
	export default {
		components: {
			Myuser,
			UploadCopy,
		},
		data() {
			return {
				// 是否无票状态
				IsBill: 0, //默认否
				IsNoTicketOptions: [{
						value: '1',
						name: '是',
						checked: false
					},
					{
						value: '0',
						name: '否',
						checked: true
					}
				],

				disabled: false,
				// /上传文件列表
				reimburse_Files: [],
				// 是否展示弹窗
				show: false,
				entity: {
					BillsNum: 1
				},
				// 业务性质树结构
				dataTree: [],
				// 票据类型下拉列表数据
				newBillTypeOptions: [],
				// 费用类型下拉列表数据
				newExpenseTypeOptions: [],
				// 发票分类下拉列表数据
				newInvoiceClassificationOptions: [],
				// 所有公司下拉列表数据
				newCompayListOptions: [],
				filePath: ""


			}
		},
		computed: {
			...mapState(["BillTypeOptions", "ExpenseTypeOptions", "InvoiceClassificationOptions", "CompayListOptions",
				"ExpenseTypeOptions", "Base_DistrictGetTreeDataOptions"
			]),
		},
		onShow() {
			// 业务性质树结构数据回显
			this.dataTree = this.ExpenseTypeOptions
		},
		onLoad(options) {
			// 默认处理附件上传删除图标按钮
			this.disabled = false
			// 暂时不删除
			// this.$nextTick(function() {
			// 	this.$refs.UploadCopy.show = false
			// 	this.$refs.UploadCopy.deletable = true
			// })
			this.newBillTypeOptions = this.BillTypeOptions
			this.newExpenseTypeOptions = this.ExpenseTypeOptions
			this.newInvoiceClassificationOptions = this.InvoiceClassificationOptions
			this.newCompayListOptions = this.CompayListOptions
			console.log('this.newBillTypeOptions', this.newBillTypeOptions)
			console.log('this.newExpenseTypeOptions', this.newExpenseTypeOptions)
			console.log('this.newInvoiceClassificationOptions', this.newInvoiceClassificationOptions)
			console.log('this.newCompayListOptions', this.newCompayListOptions)
		},
		methods: {
			// ***************************https://blog.csdn.net/javaTempest/article/details/136812205 
			// **************************https://blog.csdn.net/Everglow___/article/details/137785678

			// 上传成功
			handlerSuccess(file) {
				var that = this
				if (file.reimburse_Files.length > 0) {
					let reimburse_Files = file.reimburse_Files
					this.reimburse_Files = reimburse_Files
					this.entity.reimburse_Files = reimburse_Files
					this.entity.Upload = file.Upload
				}
			},
			// 移除附件
			handlerRmoveFile(file) {
				var that = this

				let reimburse_Files = file.FileList.map(item => {
					return {
						FilePath: item.fileEntity.linkUrl
					}
				})
				this.reimburse_Files = reimburse_Files
				this.entity.reimburse_Files = reimburse_Files
				this.entity.Upload = file.Upload

			},
			// 业务性质选择事件
			pickerChange(event) {
				let arr = event.detail.value
				// 业务性质名称
				let ExpenseTypeName = event.detail.value.map(item => {
					return item.text
				}).join('/')
				let ExpenseTypeId = event.detail.value.map(item => {
					return item.value
				}).join('/')
				// 业务性质名称和id参数处理
				this.$set(this.entity, 'ExpenseType', ExpenseTypeName)
				this.$set(this.entity, 'ExpenseTypeName', arr)
				this.$set(this.entity, 'ExpenseTypeId', ExpenseTypeId)

				console.log('业务性质选择', event, this.entity)
			},
			// 票面金额  报销金额实时输入事件
			inputChange(event, key) {
				const inputRule = /[^1-9]/g //只能输入正整数
				if (event < 0) {
					this.$nextTick(() => {
						this.$set(this.entity, key, inputRule);
					});
				}
				if (key === 'FaceAmount') {
					// 票面金额实时输入的时候 同时更新报销金额联动
					this.entity.ReimburseAmount = event
				}
			},
			// 业务性质 发票分类  费用类型下拉改变事件
			selectOptionsChange(event, key) {

				let optionsArr = []

				if (key === 'ExpenseType') {
					optionsArr = this.ExpenseTypeOptions
				} else if (key === 'BillType') {
					// 票据分类
					optionsArr = this.BillTypeOptions
				} else {
					// 发票分类
					optionsArr = this.InvoiceClassificationOptions
				}
				// 业务性质
				let ExpenseTypeName = optionsArr.filter(item => item.value === event)[0].text
				this.$set(this.entity, key + 'Name', ExpenseTypeName)

			},
			// 是否无票支出改变
			switchChange(event) {
				let IsBill = event.detail.value
				this.IsBill = IsBill
				console.log('是否无票支出', this.entity, this.IsBill)
			},

			// 保存子表
			handleSubmitDetailSave() {
				var that = this
				this.$refs.form.validate().then(res => {

					let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					let prevPage = pages[pages.length - 2] //上一页页面实例
					let newEntity = JSON.parse(JSON.stringify(this.entity))
					// 单独处理是否无票支出和票据张数的默认值参数
					this.$set(newEntity, 'IsBill',
						this.IsBill == 1 ? true : false)
					// 单独处理票据张数  如果没有填写  默认0
					this.$set(newEntity, 'BillsNum',
						newEntity.BillsNum ? newEntity.BillsNum : 0)
					console.log('日常可以保存了', newEntity)
					uni.navigateBack({
						delta: 1,
						success: () => {
							console.log('保存获取上页面方法', prevPage.$vm)
							prevPage.$vm.setDetailData('add', newEntity) // 给上一页绑定方法otherFun,传参地址id
						}
					})

				}).catch(err => {
					uni.hideLoading()
					that.loading = false
				})
			},
			//本条客户的数据
			Client(arr) {
				let CustomerNameArr = arr.map(item => {
					return item.cCusName
				})
				let CustomIdArr = arr.map(item => {
					return item.Id
				})
				let CustomerName = CustomerNameArr.join(',')
				let CustomId = CustomIdArr.join(',')
				this.$set(this.entity, "CustomerName", CustomerName);
				this.$set(this.entity, "CustomName", CustomerName);
				this.entity.CustomId = CustomId
				// 直接插入选中的下拉客户数组  用于添加行程明细选择客户使用
				this.$set(this.entity, "CustomerNameOptions", arr);
				console.log('选择客户确定好后传递父组件的值---------------', arr, this.entity, CustomerName, CustomId)
			},
			//选择客户
			CustomerChoice() {
				if (this.disabled) return
				this.$refs.myuser.openForm();
			},
			init() {
				this.show = true

			},
			openForm(data) {
				this.init()
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 设置 label 的样式 */
	::v-deep.uni-forms-item {
		padding-right: 40rpx !important;

		/* 例如，设置 label 的宽度和对齐方式 */
		.uni-forms-item__label {
			display: flex !important;
			justify-content: flex-end !important;
		}
	}

	// 覆盖uniapp 的 uni-data-select 央视
	::v-deep.uni-select {
		border: none !important;
	}

	// 覆盖uniapp 的 uni-data-pircker 央视
	::v-deep.input-value-border {
		border: none !important;
	}

	// 覆盖uviewform表单form-item的下边距
	::v-deep.uni-forms-item {
		margin-bottom: 0 !important;
	}

	::v-deep.uni-forms-item {
		border-bottom: 1px solid #EEE;
		padding-top: 20rpx !important;
		padding-bottom: 20rpx !important;
	}

	.submitButton {
		// z-index: 99;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(130rpx + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(130rpx + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		background: #fff;
		padding-top: 10rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		border-top: 1px solid #e9e9e9;
		padding-left: 15px;
		padding-right: 15px;
	}
</style>